<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('试卷批改')">
<body>
<style type="text/css">
    @media screen and (max-width: 1100px) {
        .layui-layer-iframe {
            overflow-y: visible !important;
        }
    }

    .paper-track-confirm {
        text-align: left;
        padding: 10px;
    }

    .paper-track-reason {
        padding: 5px 0;
    }

    .paper-track-result {
    }

    .sp_result_area {
        width: 400px !important;
    }
</style>
<link rel="stylesheet" type="text/css" th:href="@{/static/lib/selectpage/selectpage.css}"/>
<div id="content" class="col-lg-12 col-sm-12" style="padding: 5px;">
    <div class="row">
        <div class="box col-md-12" style="margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-education"></i>试卷批改
                    </h2>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search" role="form" method="post" action="/testPaper/person/page/list/" onsubmit="return checkForm();">
                        <div class="form-group" data-chosenWidth="true" style="margin-bottom: 5px;">
                            <select name="pageSize" class="form-control input-sm" id="pagesize">
                                <option value="10">10条/页</option>
                                <option value="25">25条/页</option>
                                <option value="50">50条/页</option>
                            </select>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="gradeId">
                                    <option value="0">-年级-</option>
                                    <option th:each="list:${listQGrade}" th:value="${list.id}" th:text="${list.cnName}" th:selected="${gradeId==list.id}"></option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="term">
                                    <option value="0">-学期-</option>
                                    <option value="1" th:selected="${term==1}">上学期</option>
                                    <option value="2" th:selected="${term==2}">下学期</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm" style="margin-right: 15px;">
                                <input class="form-control input-sm" style="height: 30px;min-height: 10px;" type="text" placeholder="请选择关联教材" id="textbooksId" name="textbooksId" th:value="${textbooksId}">
                            </div>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="unitId">
                                    <option value="0">-单元-</option>
                                    <option th:each="list:${listQuestionTerm}" th:value="${list.id}" th:text="${list.cnName}" th:selected="${unitId==list.id}"></option>
                                </select>
                            </div>
                            <!--
                            <div class="input-group input-group-sm">
                                <input type="text" name="sendTime" th:value="${sendTime}" placeholder="发送时间" class="Wdate form-control" style="padding: 0 2px;height: 34px;" autocomplete="off" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
                            </div>
                            -->
                            <div class="input-group input-group-sm">
                                <input type="text" name="submitTime" th:value="${submitTime}" placeholder="提交时间" title="试卷完成提交时间" class="Wdate form-control" style="padding: 0 2px;width: 100px;height: 30px;min-height: 10px;border:solid 1px rgb(204, 204, 204);" autocomplete="off"
                                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{\'%y-%M-%d\'}',readonly:true})"/>
                            </div>
                            <div class="input-group input-group-sm">
                                <input type="text" name="correctTime" th:value="${correctTime}" placeholder="批改时间" title="试卷批改时间" class="Wdate form-control" style="padding: 0 2px;width: 100px;height: 30px;min-height: 10px;border:solid 1px rgb(204, 204, 204);" autocomplete="off"
                                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{\'%y-%M-%d\'}',readonly:true})"/>
                            </div>
                            <div class="input-group input-group-sm">
                                <input type="text" name="recordTimeStart" id="recordTimeStart" th:value="${recordTimeStart}" placeholder="发送日期" title="试卷发送日期" class="Wdate form-control" style="width: 100px;border:solid 1px rgb(204, 204, 204);" autocomplete="off"
                                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'recordTimeEnd\',{d:-1})||\'%y-%M-%d\'}',readonly:true})"/>
                                <input type="text" name="recordTimeEnd" id="recordTimeEnd" th:value="${recordTimeEnd}" placeholder="发送日期" title="试卷发送日期" class="Wdate form-control" style="width: 100px;border:solid 1px rgb(204, 204, 204);" autocomplete="off"
                                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'recordTimeStart\',{d:1})||\'2020-01-01\'}',readonly:true})"/>
                            </div>
                            <div class="input-group input-group-sm">
                                <select id="state" class="form-control" name="state">
                                    <option value="">-状态-</option>
                                    <option value="0" th:selected="${state==0}">未做</option>
                                    <option value="4" th:selected="${state==4}">答题中(未交卷)</option>
                                    <option value="1" th:selected="${state==1}">待批改</option>
                                    <option value="2" th:selected="${state==2}">完成(未讲解)</option>
                                    <option value="3" th:selected="${state==3}">已讲解</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <select id="paperTrackState" class="form-control" name="paperTrackState">
                                    <option value="">-是否跟进-</option>
                                    <option value="0" th:selected="${paperTrackState==0}">无需跟进</option>
                                    <option value="1" th:selected="${paperTrackState==1}">待跟进</option>
                                    <option value="2" th:selected="${paperTrackState==2}">已跟进</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm" th:if="${roleId==1 or roleId==8 or roleId==9 }">
                                <select id="sscId" class="form-control" name="sscId">
                                    <option value="">-请选择SSC-</option>
                                    <option th:each="item,itemStat: ${sscList}" th:text="${item.loginName}" th:value="${item.id}" th:selected="${item.id==sscId}">ssc</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <input type="search" name="search" id="search" th:value="${search}" class="form-control input-sm" placeholder="查询关键字..." style="width:200px;"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit"> 查 询 </button>
                                </span>
                            </div>
                        </div>
                    </form>
                    <table class="table table-striped table-bordered table-hover" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">记录ID</th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">登录名</th>
                            <th class="text-center">试卷名称</th>
                            <th class="text-center">教材</th>
                            <th class="text-center">年级</th>
                            <th class="text-center">学期</th>
                            <th class="text-center">单元</th>
                            <th class="text-center">发送时间</th>
                            <th class="text-center">提交时间</th>
                            <th class="text-center">批改时间</th>
                            <th class="text-center">成绩</th>
                            <th class="text-center">试卷状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="paper,itemStat:${pageInfo.list}">
                            <td class="text-center" th:text="${itemStat.index+1}">1</td>
                            <td class="text-center" style="width: 6%;" th:text="${paper.scoreId}">记录ID</td>
                            <td class="text-center" style="width: 5%;" th:text="${paper.studentName}">姓名</td>
                            <td class="text-center" style="width: 5%;" th:text="${paper.studentLoginName}">登录名</td>
                            <td class="text-center" style="width: 8%;" th:text="${paper.paperName}">试卷名称</td>
                            <td class="text-center" style="width: 15%;" th:text="${paper.textbooksNameString}">教材</td>
                            <td class="text-center" style="width: 5%;" th:text="${paper.gradeCnName}">年级</td>
                            <td class="text-center" style="width: 5%;" th:text="${paper.termName}">学期</td>
                            <td class="text-center" style="width: 5%;" th:text="${paper.unitNameString}">单元</td>
                            <td class="text-center" style="width: 6%;" th:text="${#dates.format(paper.sendTime, 'yyyy-MM-dd HH:mm:ss')}">发送时间</td>
                            <td class="text-center" style="width: 6%;" th:text="${#dates.format(paper.submitTime, 'yyyy-MM-dd HH:mm:ss')}">提交时间</td>
                            <td class="text-center" style="width: 6%;" th:text="${#dates.format(paper.correctTime, 'yyyy-MM-dd HH:mm:ss')}">批改时间</td>
                            <td class="text-center" style="width: 5%;" th:text="${paper.state==0?'未完成':(paper.state==1?'待批改':paper.score)}">成绩</td>
                            <td style="text-align: center;width: 8%;" th:if="${paper.state==0&&paper.trackStatus==-1}">未完成</td>
                            <td style="text-align: center;width: 8%;" th:if="${paper.state==0&&paper.trackStatus==0}">答题中(未交卷)</td>
                            <td style="text-align: center;width: 8%;" th:if="${paper.state==1}">待批改</td>
                            <td style="text-align: center;width: 8%;" th:if="${paper.state==2}">完成(未讲解)</td>
                            <td style="text-align: center;width: 8%;" th:if="${paper.state==3}">已讲解</td>
                            <td style="text-align: center;width: 25%;">
                                <a href="javascript:void(0);"
                                   th:alt="|${testServerUrl}testPaper/#/?rnd=${rnd}&from=CRM&tpid=${paper.id}&qid=0&pid=${paper.studentId}&sid=${paper.scoreId}&isAdmin=1&isCorrectPreview=1&isForceCorrection=1&tokenString=S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A|"
                                   onclick="dealPaper(this);"
                                   class="btn btn-sm btn-info preview"
                                   role="button">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    <span>查看</span>
                                </a>
                                <a href="javascript:void(0);"
                                   th:if="${session.menuMap[324] != null and session.menuMap[324] !='' and paper.state==1}"
                                   th:alt="|${testServerUrl}testPaper/#/?rnd=${rnd}&from=CRM&tpid=${paper.id}&qid=0&pid=${paper.studentId}&sid=${paper.scoreId}&isAdmin=1&isCorrectPreview=0&isForceCorrection=0&tokenString=S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A|"
                                   onclick="dealPaper(this);"
                                   th:class="${paper.state==1?'btn btn-sm btn-danger preview':'btn btn-sm btn-info preview'}"
                                   role="button">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    <span>批改</span>
                                </a>
                                <a href="javascript:void(0);"
                                   th:if="${session.menuMap[325] != null and session.menuMap[325] !='' and paper.paperTrackState>0}"
                                   th:title="${paper.paperTrackState}"
                                   th:attr="onclick=|showTrackPaper(this,${paper.scoreId},'${paper.paperTrackReason}','${paper.paperTrackResult}');|"
                                   th:class="${paper.paperTrackState==1?'btn btn-sm btn-danger':'btn btn-sm btn-success'}"
                                   role="button">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    <span th:text="${paper.paperTrackState==1?'待跟进':'已跟进'}">待跟进</span>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
        <!--/box-->
    </div>
    <!--/row-->
</div>
<!-- content ends -->

<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script type="text/javascript" th:src="@{'/static/lib/selectpage/selectpage.js?v=201901250003'}"></script>
    <script type="text/javascript">
        var ADMIN_TOKEN_STRING = "S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A";

        $(function () {
            //关联教材
            $('#textbooksId').selectPage({
                showField: 'name',
                keyField: 'id',
                data: '/questionKnowledge/showTextbooks',
                multiple: false,//单选
                pageSize: 5,
                eAjaxSuccess: function (data) {
                    // console.log("data:" + JSON.stringify(data));
                    return data;
                },
                eSelect: function (data) {
                }
            });

            stateChg();
            $("#state").on("click", function () {
                stateChg();
            });
        });

        function stateChg() {
            if ($("#state").val() != 1 && $("#state").val() != 2) {
                $("#paperTrackState").attr("disabled", true);
            } else {
                $("#paperTrackState").attr("disabled", false);
            }
        }

        function checkForm() {
            var bl = true;
            if ($("#search").val().trim() == "") {
                //bl = false;
                //layer.msg('搜索关键字不能为空', {icon: 2});
            }
            //$(":submit").attr("disabled", bl);
            return bl;
        }

        function dealPaper(obj) {
            var url = $(obj).attr("alt");
            console.log("url=" + url);
            //iframe窗口
            top.layer.open({
                type: 2,
                title: '试卷批改',
                closeBtn: 1, //显示关闭按钮
                shade: 0.4,
                area: ['98%', '98%'],
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        function strCheck(str) {
            //这里\,，就是只允许匹配小写","号跟中文的"，"号，如有其它需求可自行在后面添加
            var reg = /^[a-zA-Z0-9\u4e00-\u9fa5\,，]+$/;
            if (reg.test(str)) {
                return true;
            } else {
                layer.msg("只能是汉字、字母、数字及逗号", {icon: 2})
                return false;
            }
        }

        function showTrackPaper(obj, scoreId, reason, result) {
            var state = $(obj).attr("title");

            if (state == 2) {
                // 已更新取消
                layer.msg("跟进原因：" + reason + "<br/>跟进结果：" + result, {icon: 1});
                return;
            }

            layer.open({
                type: 1,
                title: "跟进结果",
                content:
                    "<div class='paper-track-confirm'>" +
                    "<div class='paper-track-reason'>跟进原因：" + reason + "</div>" +
                    "<div class='paper-track-result'><textarea id='track-result' maxlength='95' type='text' class='form-control' placeholder='请输入跟进结果，最多95个汉字'/></div>" +
                    "</div>"
                ,
                area: ['450px', '225px'],
                btnAlign: 'c',//对齐方式　r l c
                btn: ["确认"],
                fixed: false,
                top: 10,
                yes: function (index, layero) {
                    var trackResult = $("#track-result").val();

                    if (trackResult == "") {
                        layer.msg("跟进结果不能为空", {icon: 2})
                        return
                    }

                    // 输入字符校验
                    if (!strCheck(trackResult)) {
                        return
                    }

                    var trackRecord = {
                        scoreId: scoreId,
                        state: 2,
                        trackResult: trackResult
                    };
                    console.log("trackRecord:" + JSON.stringify(trackRecord))

                    $.ajax({
                        type: "post",
                        url: "/testPaper/updatePaperTrackRecord?tokenString=" + ADMIN_TOKEN_STRING,
                        data: JSON.stringify(trackRecord),
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        success: function (res) {
                            layer.close(index);//为关闭

                            //console.log(JSON.stringify(res));
                            if (res != null && res.status == 1) {
                                layer.msg('操作成功', {icon: 1});
                                $('form').submit();
                            } else {
                                parent.layer.msg('操作失败:' + res.msg, {icon: 2});
                            }
                        },
                        error: function (err) {
                            console.log(JSON.stringify(err.responseJSON))
                            layer.msg('系统异常:' + err.responseJSON.message, {icon: 2});
                        }
                    });
                }
            });

            // //prompt层
            // layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
            //     layer.close(index);
            //     layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
            //         layer.close(index);
            //         layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
            //     });
            // });
            //
            // //询问框
            // layer.confirm('您修改状态为已跟进么？', {
            //     btn: ['确认', '取消'] //按钮
            // }, function () {
            //     layer.closeAll('dialog');
            //     $(obj).button('loading');
            //
            //     $.post("/testPaper/changeTrackStatus?tokenString=" + ADMIN_TOKEN_STRING, {scoreId: scoreId}, function (res) {
            //         if (res.status == 1) {
            //             layer.msg('操作成功', {icon: 1});
            //             $('form').submit();
            //         } else {
            //             layer.msg('操作失败', {icon: 2});
            //         }
            //     });
            //     //恢复按钮状态
            //     $(obj).button('reset');
            // });
        }

        /**
         * 删除试卷
         * @param id 试卷ID
         * @param obj 点击的当前元素
         */
        function deletePaper(id, obj) {
            //询问框
            layer.confirm('您确认删除该试卷么？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                layer.closeAll('dialog');

                // $.get("", {}, function (res) {
                //     doDeleteResult(res);
                // }, 'json');
                //
                // function doDeleteResult(res) {
                //     console.log(res);
                //     if (res != null && res.status == 1) {
                //         layer.msg('删除成功', {icon: 1});
                //         window.location.reload();
                //     } else {
                layer.msg('操作失败', {icon: 2});
                //     }
                // }
            }, function () {
                layer.msg('您放弃了操作', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了']
                });
            });
        }
    </script>
</div>

</body>
</html>